import React from "react";

// 通过ref来获取一个东西，把这个东西传给子组件，子组件调用这个东西

class Home extends React.Component{
    constructor(){
        super()
        
    }
    handhome = () =>{
        console.log('homess')
    }
    render(){
        return(
            <div className="home" onClick={this.handhome} >home</div>
        )
    }
}

class App extends React.Component{
    constructor(){
        super()
        this.def_ref=React.createRef()
        // console.log('cnstructor',this.def_ref)
        // 这里拿不到ref  是后续更新才拿到的ref
        this.demo_home=React.createRef()
    }
    // componentDidMount(){
    //     // console.log('componentDidMount',this.def_ref)

    //     // var div = document.querySelector('.app')
    //     // console.log('div',{div})

    //     console.log('home',this.demo_home)

    // }

    focusTextInput = () =>{
        // 通过ref获取输入框的焦点
        // this.def_ref.current.focus();
        this.demo_home(this.handhome)
    }
    
    render(){
        return(
           
            <div className="app" >
                    <input type="text" ref={this.def_ref}/>
                     <input type="button" 
                     value='dasdad'
                    onClick={this.focusTextInput}
                     />

                     <Home ref={this.demo_home}/>
            </div>
        )
    }

}


export default App